<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        出入库记录管理
        <small>管理您仓库的出入库记录</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-table"></i> 出入库记录管理</a></li>
        <li class="active">添加出入库记录</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">添加入库记录</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <form role="form">
                <!-- text input -->
                <div class="form-group">
                  <label for="time">时间</label>
                  <input id="time" class="form-control" disabled type="text">
                </div>
                <div class="form-group">
                  <label for="type">类型</label>
                  <input id="type" class="form-control" disabled placeholder="入库" type="text">
                </div>
                <div class="form-group">
                  <label for="rack">货架</label>
                  <select id="rack" class="form-control">
                  </select>
                </div>
                <div class="form-group">
                  <label for="product">商品</label>
                  <select id="product" class="form-control">
                  </select>
                </div>
                <div class="form-group">
                  <label for="count">数量</label>
                  <input id="count" class="form-control" placeholder="请输入商品数量" type="number">
                </div>
                <div class="form-group">
                  <label for="operator">负责员工</label>
                  <input id="operator" class="form-control" disabled
                         value="1 | user0">
                </div>
                <div class="form-group">
                  <label for="vendors">供应商</label>
                  <select id="vendors" class="form-control">
                  </select>
                </div>
                <div>
                  <p id="message" class="alert alert-danger hidden">message</p>
                </div>
              </form>
            </div>
            <div class="box-footer">
              <button class="btn btn-primary" @click="add()">点击提交</button>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<script>
export default {
  name: "addIO",
  methods: {
    add() {
      let id = this.GLOBAL.appData.ioList.length + 1;
      let time = document.getElementById("time");
      let rackId = document.getElementById("rack");
      let productId = document.getElementById("product");
      let count = document.getElementById("count");
      let operator = 1;
      let vendorsId = document.getElementById("vendors");
      if (rackId.value === "" || productId.value === "" || count.value === "" || vendorsId.value === "") {
        this.$message.warning("出入库信息不得为空");
      } else {
        this.GLOBAL.appData.ioList.push({
          "id": id,
          "time": time.value,
          "rackName": rackId.value,
          "productName": productId.value,
          "vendorsName": vendorsId.value,
          "count": count.value,
          "operator": operator,
          "type": "入库"
        })
        this.$router.push("/main/ioData");
      }
    },
  },
  data() {
    return {
      stockInfo: this.GLOBAL.appData.stockInfo,
      rackInfo: this.GLOBAL.appData.rackInfo,
      vendorsInfo: this.GLOBAL.appData.vendorsInfo,
    }
  },
  mounted() {
    function setFormattedTime() {
      var d = new Date();
      var month = d.getMonth() + 1;
      var newMonth = month > 9 ? month : "0" + month;
      var day = d.getDate();
      var newDay = day > 9 ? day : "0" + day;
      var hours = d.getHours();
      var newHours = hours > 9 ? hours : "0" + hours;
      var minutes = d.getMinutes();
      var newMinutes = minutes > 9 ? minutes : "0" + minutes;
      var seconds = d.getSeconds();
      var newSeconds = seconds > 9 ? seconds : "0" + seconds;
      var time = d.getFullYear() + '-' + newMonth + '-' + newDay + ' ' + newHours + ':' + newMinutes + ':' + newSeconds;
      $("#time").val(time);
    }

    setFormattedTime();
    setInterval(() => {
      setFormattedTime();
    }, 1000);

    $('#product').select2({data: this.stockInfo});
    $('#rack').select2({data: this.rackInfo});
    $('#vendors').select2({data: this.vendorsInfo});
  }
}
</script>

<style scoped>

</style>